ASP.NET Core SignalR হলো একটি লাইব্রেরি, যা রিয়েল-টাইম ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য ব্যবহৃত হয়। SignalR-এর মাধ্যমে সার্ভার এবং ক্লায়েন্টের মধ্যে bidirectional communication সম্ভব হয়।
SignalR-এর ক্লায়েন্ট সাইড ইন্টিগ্রেশনের জন্য JavaScript লাইব্রেরি ব্যবহার করা হয়, যা ক্লায়েন্ট ব্রাউজার এবং সার্ভারের মধ্যে রিয়েল-টাইম যোগাযোগ সক্ষম করে।
SignalR ব্যবহার করার জন্য প্রথমে সার্ভার সাইড সেটআপ করতে হবে।
Startup.cs এ SignalR Middleware যুক্ত করুন:
public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
services.AddSignalR();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapHub<MyHub>("/myHub");
endpoints.MapDefaultControllerRoute();
});
}
SignalR Hub তৈরি করুন:
using Microsoft.AspNetCore.SignalR;
public class MyHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}
SignalR ক্লায়েন্ট লাইব্রেরি ডাউনলোড করার জন্য npm বা CDN ব্যবহার করতে পারেন।
npm install @microsoft/signalr
HTML ফাইলে নিচের স্ক্রিপ্ট ট্যাগ যুক্ত করুন:
<script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@latest/dist/browser/signalr.min.js"></script>
HTML ফাইল:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SignalR Chat</title>
<script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@latest/dist/browser/signalr.min.js"></script>
</head>
<body>
<div>
<input type="text" id="userInput" placeholder="Your Name" />
<input type="text" id="messageInput" placeholder="Your Message" />
<button id="sendButton">Send</button>
</div>
<ul id="messagesList"></ul>
<script>
// SignalR Hub এর সঙ্গে সংযোগ তৈরি করা
const connection = new signalR.HubConnectionBuilder()
.withUrl("/myHub")
.build();
// সংযোগ শুরু করা
connection.start()
.then(() => {
console.log("Connected to SignalR Hub");
})
.catch(err => console.error(err.toString()));
// সার্ভার থেকে মেসেজ গ্রহণ করা
connection.on("ReceiveMessage", (user, message) => {
const li = document.createElement("li");
li.textContent = `${user}: ${message}`;
document.getElementById("messagesList").appendChild(li);
});
// মেসেজ পাঠানো
document.getElementById("sendButton").addEventListener("click", () => {
const user = document.getElementById("userInput").value;
const message = document.getElementById("messageInput").value;
connection.invoke("SendMessage", user, message)
.catch(err => console.error(err.toString()));
});
</script>
</body>
</html>
HubConnectionBuilder
ব্যবহার করে সার্ভারের Hub এর URL এর সঙ্গে সংযোগ স্থাপন করা হয়।connection.start()
ব্যবহার করে ক্লায়েন্ট এবং সার্ভারের মধ্যে সংযোগ চালু করা হয়।connection.on
মেথড ব্যবহার করে ক্লায়েন্ট সার্ভার থেকে ডেটা গ্রহণ করে। এখানে ReceiveMessage
মেথডটি ব্যবহার করা হয়েছে, যা সার্ভারের Hub এ সংজ্ঞায়িত।connection.invoke
মেথড ব্যবহার করে ক্লায়েন্ট থেকে সার্ভারে ডেটা পাঠানো হয়।উপরের কোড অনুযায়ী, ক্লায়েন্ট থেকে একটি মেসেজ পাঠানো হলে সার্ভার তা গ্রহণ করে সমস্ত সংযুক্ত ক্লায়েন্টে প্রেরণ করবে।
SignalR JavaScript ইন্টিগ্রেশন ডেভেলপারদের জন্য সহজ এবং শক্তিশালী টুল যা রিয়েল-টাইম অ্যাপ্লিকেশন ডেভেলপমেন্টে নতুন মাত্রা যোগ করে।
common.read_more